.container-header {
  color: white;
  background-color: #01204C;
}

.container-header a {
  cursor: pointer;
  color: #3AA3FC;
  text-decoration: none;
}

.container-body {
  line-height: 1.6;
  text-align: justify;
  padding: 50px 60px;
  font-size: 20px;
}

.container {
  margin: 40px auto;
  width: 80%;
}

.filtro {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.filtro__field{
  margin: 0;
  padding: 0px;
}

.filtro__label {
  font-size: calc((12px + 0.25vw) * 0.875);
  font-weight: 700;
  letter-spacing: 4px;
  margin: 10px 0;
  text-transform: uppercase;
}

.filtro__input {
  background: none;
  border: 1px solid #626689;
  border-radius: 6px;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  padding: 14px;
  outline: none;
  width: 100%;
}

/* Ações / botão */


.filtro__button {
  background: none;
  border: 1px solid var(--gray-border);
  border-radius: 50px;
  cursor: pointer;
  height: 50px;
  margin-bottom: 24px;
  padding: 12px;
  transition: 0.2s ease-in-out;
  width: 50px;
}

/* <<<Estilização das notícias>>> */

/* Lista de notícias */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-list__item {
  padding-left: 36px;
  margin-bottom: 20px;
}

/* Card principal */
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: none;
}

/* Detalhes de topo */
.card__details {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
}

.card__meta {
  display: flex;
  flex-direction: column;
}

.card__meta--title {
  margin-right: 10%;
}

.card__meta--share {
  align-items: center;
  width: 15%;
}

/* Título e link */
.card__title {
  font-size: 22px;
  font-weight: 500;
  text-decoration: none;
  color: var(--primary);
}

.card__link {
  text-decoration: none;
  color: var(--primary);
}

/* Compartilhamento */
.card__share-links {
  display: flex;
  justify-content: space-around;
  width: 90%;
  margin: 0 auto;
}

.card__share-link img {
  width: 20px;
  height: 20px;
}

/* Corpo do card */
.card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card__bottom {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
/* Resumo */
.card__resume {
  margin-bottom: 16px;
}

.card__resume-title {
  font-size: calc((12px + 0.25vw) * 0.875);
  font-weight: 700;
  letter-spacing: 4px;
  margin-top: 6px ;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.card__resume-text {
  margin: 0;
  font-size: 18px;
}

/* Data de publicação */
.card__date {
  font-size: 14px;
  font-style: italic;
}

.card__date time {
  font-weight: 500;
}

/* Linhas separadoras */

.card__line {
  width: 100%;
  margin-left: 32px;
  height: 5.5px;
  margin-bottom: 16px;
  background: #060B3F;
  opacity: 1;
}

/* <<<Estilização da paginação>>> */
/* Block: container geral da paginação */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.5rem; 
  gap: 0.25rem;          
  opacity: 0; /* Retirar temporariamente o pagination */
}

/* Element: “wrapper” dos números */
.pagination__numbers {
  display: flex;
  gap: 0.5rem; /* 8px de espaçamento entre números */
}

/* Element: botão genérico (prev e next) */
.pagination__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;          /* 40px */
  height: 2.5rem;         /* 40px */
  padding: 0;             /* removido padding extra */
  border: none;
  border-radius: 50%;
  background-color: #060B3F;
  color: #bbbbbb;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.pagination__button:hover {
  background-color: var(--primary-dark);
}

/* Element: cada número */
.pagination__number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;          /* 40px */
  height: 2.5rem;         /* 40px */
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #060B3F;
  color: #bbbbbb;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pagination__number:hover,
.pagination__number--active {
  background-color: var(--primary-dark);
}


@media screen and (min-width: 1025px) {
  .container-header {
      padding: 50px 60px;
  }

  .container-header h2 {
      font-size: 50px;
      margin-bottom: 20px;
      font-weight: bold;
  }

  .container-header h3 {
      font-size: 30px;
      margin-bottom: 20px;
      font-weight: normal;
  }

  .container-header p {
      font-size: 16px;
      font-weight: normal;
  }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  .container-header {
      padding: 20px 70px;
  }

  .container-header h2 {
      font-size: 24px;
      margin-bottom: 15px;
  }

  .container-header h3 {
      font-size: 16px;
      margin-bottom: 15px;
  }

  .container-header p {
      font-size: 9px;
      font-weight: normal;
  }

  .container-body {
      padding: 20px 50px;
  }

  .container-body p {
      font-size: 14px;
      text-indent: 2em;
  }
}

@media screen and (max-width: 600px) {
  .container-header {
      padding: 20px 40px;
  }

  .container-header h2 {
      font-size: 20px;
      margin-bottom: 10px;
  }

  .container-header h3 {
      font-size: 10px;
      margin-bottom: 10px;
  }

  .container-header p {
      font-size: 5px;
      font-weight: normal;
  }

  .container-body {
      padding: 20px 40px;
  }

  .container-body p {
      font-size: 10px;
      text-indent: 2em;
  }
}

/* <<< Responsividade >>> */

/* Tablets grandes (entre 992px e 1200px) */
@media (max-width: 1200px) {
  /* Ajustes para telas menores que desktops largos */
}

/* Tablets médios (entre 768px e 991px) */
@media (max-width: 991px) {
  .card__meta--share {
    width: 20%;
  }
}

/* Celulares grandes (entre 576px e 767px) */
@media (max-width: 767px) {
  .card__meta--share {
    width: 30%;
  }
}

/* Celulares pequenos (até 575px) */
@media (max-width: 575px) {
  .card__meta--share {
    width: 30%;
  }
}